<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>响应式开发</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="dist/oc/assets/owl.carousel.min.css">
  <link rel="stylesheet" href="dist/oc/assets/owl.theme.default.min.css">
  <script src="dist/picturefill/picturefill.min.js"></script>

</head>

<body>
  <!-- [if ite IE8]>
  <p class="updatabrowser">宁德浏览器版本过低请升级以获取最佳体验</p>
<![end if]  -->
  <header>
    <nav class="top">
      <span class="tel">理财热线： 400-888-8888</span>
      <ul>
        <li><a href="#">登录</a></li>
        <li><a href="#">快速注册</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">帮助</a></li>
        <li><a href="#">APP下载</a></li>
      </ul>
    </nav>
    <nav class="main">
      <a href="#" class="brand"><img src="img/logo@1x.png"></a>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">理财频道</a></li>
        <li><a href="#">投资频道</a></li>
        <li><a href="#">新手频道</a></li>
        <li><a href="#">安全保障</a></li>
      </ul>
    </nav>
  </header>

  <div class="container">
    <section class="transaction">
      <div class="trans-content">
        <div class="trans-data">
          <span>平台累计成交金额</span>
          <span class="trans-money">19888</span>
          <span>万元</span>
        </div>
        <div class="trans-data">
          <span>过去7日成交金额</span>
          <span class="trans-money">19888</span>
          <span>万元</span>
        </div>
        <div class="trans-report">
          <a href="#">查看平台运营报告</a>
        </div>
      </div>
    </section>
    <section class="ad clearfix">
      <div class="owl-carousel">
        <picture class="item">
          <source srcset="img/ad001-l.png" media="(min-width:800px)">
          <source srcset="img/ad001-m.png" media="(min-width:480px)">
          <img srcset="img/ad001.png" >
        </picture>
        <picture class="item">
            <source srcset="img/ad002-l.png" media="(min-width:800px)">
              <source srcset="img/ad002-m.png" media="(min-width:480px)">
              <img srcset="img/ad002.png" >
        </picture>
        <picture class="item">
            <source srcset="img/ad003-l.png" media="(min-width:800px)">
              <source srcset="img/ad003-m.png" media="(min-width:480px)">
              <img srcset="img/ad003.png">
        </picture>
      </div>
    </section>
    <section class="feature">
      <div class="item">
        <h3>安全</h3>
        <p>国家AAA信用平台<br>银行资金托管<br>上市公司背景证明</p>
      </div>
      <div class="item">
        <h3>权威</h3>
        <p>中央电视台推荐<br>互联网百强企业<br>标准起草单位</p>
      </div>
      <div class="item">
        <h3>省心</h3>
        <p>100元起投<br>用户利益保障机制<br>保险公司承担</p>
      </div>
    </section>
    <section class="notice clearfix">
      <a href="#"><span>2019-03-23</span>元旦期间打好打坏度哈利打卡上班的环境</a>
      <a href="#" class="more">更多公告</a>
    </section>
    <section class="product">
      <h2>
        <p class="title">固定期限产品</p>
        <em>甄选优质基金</em>
        <em>省时省力</em>
        <em>坐等收益</em>
      </h2>
      <div class="product-content">
        <div class="item">
          <h3><em>3</em>个月</h3>
          <div class="info">
            <p>约定年华收益率<span class="year-radio">3.50%<i>起</i></span></p>
            <p>总成交金额<span class="money">1435<i>万元</i></span></p>
          </div>
          <div class="buy">
            <a href="#">购买</a>
          </div>
        </div>
        <div class="item">
          <h3><em>6</em>个月</h3>
          <div class="info">
            <p>约定年华收益率<span class="year-radio">3.50%<i>起</i></span></p>
            <p>总成交金额<span class="money">1435<i>万元</i></span></p>
          </div>
          <div class="buy">
            <a href="#">购买</a>
          </div>
        </div>
        <div class="item">
          <h3><em>12</em>个月</h3>
          <div class="info">
            <p>约定年华收益率<span class="year-radio">3.50%<i>起</i></span></p>
            <p>总成交金额<span class="money">1435<i>万元</i></span></p>
          </div>
          <div class="buy">
            <a href="#">购买</a>
          </div>
        </div>
        <div class="item">
          <h3><em>12</em>个月以上</h3>
          <div class="info">
            <p>约定年华收益率<span class="year-radio">3.50%<i>起</i></span></p>
            <p>总成交金额<span class="money">1435<i>万元</i></span></p>
          </div>
          <div class="buy">
            <a href="#">购买</a>
          </div>
        </div>
      </div>
    </section>
    <section class="product">
      <h2>
        <p class="title">固定期限产品</p>
        <em>甄选优质基金</em>
        <em>省时省力</em>
        <em>坐等收益</em>
      </h2>
      <div class="product-content">
        <div class="item">
          <h3><em>3</em>个月</h3>
          <div class="info">
            <p>约定年华收益率<span class="year-radio">3.50%<i>起</i></span></p>
            <p>总成交金额<span class="money">1435<i>万元</i></span></p>
          </div>
          <div class="buy">
            <a href="#">购买</a>
          </div>
        </div>
        <div class="item">
          <h3><em>6</em>个月</h3>
          <div class="info">
            <p>约定年华收益率<span class="year-radio">3.50%<i>起</i></span></p>
            <p>总成交金额<span class="money">1435<i>万元</i></span></p>
          </div>
          <div class="buy">
            <a href="#">购买</a>
          </div>
        </div>
        <div class="item">
          <h3><em>12</em>个月</h3>
          <div class="info">
            <p>约定年华收益率<span class="year-radio">3.50%<i>起</i></span></p>
            <p>总成交金额<span class="money">1435<i>万元</i></span></p>
          </div>
          <div class="buy">
            <a href="#">购买</a>
          </div>
        </div>
        <div class="item">
          <h3><em>12</em>个月以上</h3>
          <div class="info">
            <p>约定年华收益率<span class="year-radio">3.50%<i>起</i></span></p>
            <p>总成交金额<span class="money">1435<i>万元</i></span></p>
          </div>
          <div class="buy">
            <a href="#">购买</a>
          </div>
        </div>
      </div>
    </section>
    <nav class="footer">
      <div class="footer-content">
        <p class="brand"></p>
        <ul>
          <li class="title">关于我们</li>
          <li><a href="#">公司介绍</a></li>
          <li><a href="#">业务模式</a></li>
          <li><a href="#">合作机构</a></li>
          <li><a href="#">服务协议</a></li>
        </ul>
        <ul>
          <li class="title">机构服务</li>
          <li><a href="#">机构中心</a></li>
          <li><a href="#">合作联系</a></li>
        </ul>
        <ul>
          <li class="title">交易帮助</li>
          <li><a href="#">购买</a></li>
          <li><a href="#">赎回</a></li>
          <li><a href="#">提现</a></li>
        </ul>
        <ul>
          <li class="title">风险防范</li>
          <li><a href="#">账户安全</a></li>
          <li><a href="#">安全保障</a></li>
        </ul>
        <ul>
          <li class="title">理财产品</li>
          <li><a href="#">固定期限</a></li>
          <li><a href="#">债券/散标</a></li>
        </ul>
      </div>
      <div style="clear:both"></div>
    </nav>
  </div>

  <footer >
    <ul>
      <li><span class="icon icon-ywzfxk">支付业务许可证</span></li>
      <li><span class="icon icon-pcirk">PCI验证</span></li>
      <li><span class="icon icon-visayz">Visa 验证</span></li>
      <li><span class="icon icon-vsjmfw">VerSign加密服务</span></li>
      <li><span class="icon icon-wlgs">网络工商</span></li>
      <li><span class="icon icon-rzcx">电子商务协会认证诚信网</span></li>
      <li><span class="icon icon-gs">北京工商</span></li>
    </ul>
    <p>杭州某互联网金融公司 版权所有 2015-2016</p>
  </footer>
  <script src="dist/jQuery/jquery.js"></script>
  <script src="dist/oc/owl.carousel.min.js"></script>
  <script src="js/main.js"></script>
</body>

</html>
